<!--
 * @Descripttion: 多选用户
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-10-24 14:14:13
 * @LastEditors: GW
 * @LastEditTime: 2021-10-24 16:44:35
-->
<template>
    <div>
        <a-modal style="position:relative;z-index:10000" :title="`请选择负责人`" :visible="tableShow" @cancel="onclose">
            <div ref="searchInput">
                <a-input-search ref="inputRef" :placeholder="`请选择负责人`" v-model="inputValue" @focus="showModal" @change="inputSearch" @search="inputSearch" @pressEnter="clickEnter" />
                <div class="form-search-wrapper" ref="searchWrapper" v-show="tableShow" style="min-height:182px;">
                    <a-table :scroll="{x:0,y:180}" :columns="columns" :data-source="tableData" :customRow="customClick" :row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }" bordered :pagination="pagination" :loading="isRun">

                    </a-table>
                </div>
            </div>
            <template slot="footer">
                <a-button type="primary" @click="clickEnter('yes')">确认</a-button>
                <a-button @click="clearChoice">重置</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
import { getAction, postAction } from "@/api/manage";
export default {
    data () {
        return {
            columns: [],
            selectedKeys: [],
            selectedRows: [],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 0,
                size: 'small',
                onChange: (page, pageSize) => {
                    // this.postData.current = page;
                    this.pagination.current = page;
                    this.pagination.pageSize = pageSize;
                    this.pageList();
                }
            },
            postData: {},
            tableData: [],
            customClick: (record, index) => ({
                on: {
                    click: (event) => {
                        event.preventDefault();
                        this.clickEnter('click', record);

                    },
                },
            }),
            tableShow: false,
            isRun: false,
            setTime: null,  //延迟请求
            apiUrl: null,
            inputValue: '',  //输入框的值
        }
    },
    created () {
        this.checkSearch();
    },
    methods: {
        clearChoice () {
            //置空选择
            this.clickEnter('click', { id: null, name: null, });
        },
        pageList () {
            if (!this.isRun) {
                this.isRun = true;

                this.postData.current = this.pagination.current
                this.postData.size = this.pagination.pageSize
                this.postData['page.current'] = this.pagination.current
                this.postData['page.size'] = this.pagination.pageSize
                getAction(this.apiUrl, this.postData).then(response => {
                    if (response.code === 200) {
                        if (response.data.total && response.data.total > 0) {
                            const { records, total, current, size } = response.data;

                            let page = {
                                total: total,
                                pageSize: size,
                                current: current
                            }
                            records.forEach(item => {
                                item.name = item.realName;
                            });
                            this.pagination = Object.assign(this.pagination, page);
                            this.tableData = records;
                        }
                        this.isRun = false;
                    }
                }).catch(error => { });
            }
        },
        showModal () {
            this.pageList();

            this.tableShow = true;
        },
        onclose () {
            this.tableShow = false;
            this.inputValue = '';
        },
        inputSearch () {
            this.tableShow = true;
            this.postData.realName = this.inputValue;
            //延迟请求
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.pageList();
            }, 500)
        },
        clickEnter (type, record) {
            //type == 'click' 表示点击表格事件 else 回车事件
            let data = [];
            if (type == 'click') {
                data = [record];
            } else if (type == 'yes') {
                //多选
                this.selectedRows.forEach(item => {
                    data.push({
                        id: item.id,
                        name: item.realName,
                    })
                });
            } else {
                data = [this.tableData[0]];
            }
            console.log(`选中的数据：`, data)

            this.$emit('clickItem', data);
            this.$refs.inputRef.blur();
            this.onclose();
        },
        checkSearch () {
            this.apiUrl = "/sysUser/user/page";
            this.columns = [
                { title: "姓名", dataIndex: "realName", align: 'left', width: 60 },
                { title: "所属机构", dataIndex: "officeName", align: 'left', width: 60 },
                { title: "手机号码", dataIndex: "mobile", align: 'left', width: 80 },
                { title: "电子邮箱", dataIndex: "email", width: 150, ellipsis: true },
            ];
            this.postData = {
                current: this.pagination.current,
                size: this.pagination.pageSize,
                realName: this.inputValue,
            }
        },
        onSelectChange (keys, rows) {
            this.selectedKeys = keys;
            this.selectedRows = rows;
        }
    }
}
</script>

<style scoped>
    .form-search-wrapper {
        margin-top: 10px;
    }
</style>